<?php
  //Buffer larger content areas like the main page content
  ob_start();
?>

<!--<div class="video-overlay"></div>-->


<div class="video-hero" id="youtube-hero">
    
    <!--<h1>
        <span>Experiment</span>
        YouTube Hero
    </h1>-->

    <div class="full-screen-video-controls">
        <a class="full-screen-vid-btn pause-btn">Pause</a>
        <a class="full-screen-vid-btn play-btn">Play</a>
        <a class="full-screen-vid-btn mute-btn">Mute</a>
        <a class="full-screen-vid-btn volup-btn">+</a>
        <a class="full-screen-vid-btn voldown-btn">-</a>
    </div>
    
</div>
        
    




<?php
  //Assign all Page Specific variables
  $pagemaincontent = ob_get_contents();
  ob_end_clean();
  $pagetitle = "Richard Franklin's Web Lab";
  
  //Add javascripts here
  $pagestyles = "
    <link rel='stylesheet' href='css/vendor/tubular/screen.css'>
  ";
  $pagescripts = "
    <script src='js/vendor/tubular/jquery.tubular.1.0.js'></script>
    
    <script>
        $(document).ready(function() {
            $('#youtube-hero').tubular({
                videoId: '7kgQ8VhMVSQ',
                start: '83',
                mute: false,
                pauseButtonClass: 'pause-btn',
                playButtonClass: 'play-btn',
                muteButtonClass: 'mute-btn',
                volumeUpClass: 'volup-btn',
                volumeDownClass: 'voldown-btn'
            });
        });
    </script>

  ";
  
  //Apply the template
  include("master.tpl.php");
?>